ExtJS তে Layout Management অ্যাপ্লিকেশনের ইউজার ইন্টারফেস (UI) কিভাবে ডিভাইড বা সংস্থান হবে তা নিয়ন্ত্রণ করে। এটি বিভিন্ন ধরণের layout (লেআউট) পদ্ধতি সরবরাহ করে, যার মাধ্যমে ডেভেলপাররা সহজেই বিভিন্ন ধরনের ইউজার ইন্টারফেস ডিজাইন করতে পারে, যেমন ফ্লেক্সিবল, রেসপন্সিভ, এবং জটিল ডায়নামিক লেআউট।
ExtJS তে লেআউট ব্যবস্থাপনা অত্যন্ত শক্তিশালী, কারণ এটি components কে স্বয়ংক্রিয়ভাবে সাইজ, অবস্থান এবং পুনঃসংস্করণ করে। এটি একটি অ্যাপ্লিকেশন বা ওয়েব পেজের জন্য পুরোপুরি কাস্টমাইজড এবং রেসপন্সিভ ডিজাইন তৈরি করতে সহায়তা করে।
ExtJS তে বিভিন্ন প্রকারের লেআউট আছে, প্রতিটি লেআউট বিশেষ উদ্দেশ্যে ব্যবহৃত হয়। এই লেআউটগুলোর মধ্যে সাধারণত ব্যবহৃত কয়েকটি হলো:
border Layouthbox এবং vbox Layoutfit Layoutcard Layouttable Layoutaccordion Layoutborder লেআউটটি খুবই জনপ্রিয় এবং এটি সাধারণত পুরো অ্যাপ্লিকেশনে বা ওয়েব পেজে ব্যবহৃত হয়, যেখানে নির্দিষ্ট অংশগুলো (উদাহরণস্বরূপ, নেভিগেশন বার, কন্টেন্ট, ফুটার) স্পেসিফিক অবস্থানে থাকে। এটি একটি নর্দ্ধ (North), সাউথ (South), ইস্ট (East), ওয়েস্ট (West), এবং সেন্টার (Center) অংশে বিভক্ত করা হয়।
উদাহরণ:
Ext.create('Ext.panel.Panel', {
title: 'Border Layout Example',
layout: 'border', // লেআউট টাইপ
height: 500,
width: 800,
items: [
{
xtype: 'panel',
region: 'north', // উপরের অংশ
height: 100,
title: 'Header'
},
{
xtype: 'panel',
region: 'west', // বাম পাশ
width: 200,
title: 'Navigation'
},
{
xtype: 'panel',
region: 'center', // মূল কন্টেন্ট
title: 'Main Content',
html: '<p>Main Content goes here</p>'
}
],
renderTo: Ext.getBody()
});
region: এটি প্রতিটি প্যানেলকে নির্দিষ্ট একটি অঞ্চলে (North, South, East, West, Center) স্থাপন করতে ব্যবহৃত হয়।layout: এখানে border ব্যবহার করা হয়েছে, যা অ্যাপ্লিকেশনকে বিভিন্ন অংশে ভাগ করে।hbox এবং vbox লেআউটগুলি ফ্লেক্সবক্সের উপর ভিত্তি করে কাজ করে। hbox লেআউটগুলি উপাদানগুলিকে অনুভূমিকভাবে (হরিজেন্টালি) সাজায়, এবং vbox লেআউটগুলি উপাদানগুলোকে উল্লম্বভাবে (ভার্টিকালি) সাজায়।
উদাহরণ:
Ext.create('Ext.container.Container', {
layout: 'hbox', // অনুভূমিক লেআউট
width: 600,
height: 100,
items: [
{
xtype: 'panel',
title: 'Panel 1',
flex: 1,
html: 'First Panel'
},
{
xtype: 'panel',
title: 'Panel 2',
flex: 2,
html: 'Second Panel'
}
],
renderTo: Ext.getBody()
});
flex: এখানে flex প্রপার্টি ব্যবহার করা হয়েছে, যা উপাদানগুলিকে তাদের প্রদত্ত স্পেসের অনুপাত অনুযায়ী সম্প্রসারণ বা সংকোচন করতে সহায়ক।উদাহরণ:
Ext.create('Ext.container.Container', {
layout: 'vbox', // উল্লম্ব লেআউট
width: 200,
height: 300,
items: [
{
xtype: 'panel',
title: 'Panel 1',
height: 100,
html: 'First Panel'
},
{
xtype: 'panel',
title: 'Panel 2',
height: 100,
html: 'Second Panel'
}
],
renderTo: Ext.getBody()
});
fit লেআউটটি খুবই সরল এবং এটি একমাত্র উপাদানকে পুরো কনটেইনারে ফিট করে দেয়। সাধারণত এটি একক উপাদানকে পুরো স্ক্রিনে বা কন্টেইনারে প্রদর্শন করতে ব্যবহৃত হয়।
উদাহরণ:
Ext.create('Ext.panel.Panel', {
title: 'Fit Layout Example',
layout: 'fit',
height: 400,
width: 600,
items: [
{
xtype: 'panel',
title: 'Single Panel',
html: 'This is the only panel in the fit layout.'
}
],
renderTo: Ext.getBody()
});
card লেআউটটি ব্যবহার করে আপনি একাধিক প্যানেল বা ভিউগুলোর মধ্যে স্যুইচ করতে পারেন, একে একে দেখানোর জন্য। এটি সাধারণত ওয়িজার্ড বা ট্যাব স্টাইলের UI এর জন্য ব্যবহৃত হয়।
উদাহরণ:
Ext.create('Ext.panel.Panel', {
title: 'Card Layout Example',
layout: 'card',
height: 300,
width: 400,
activeItem: 0, // প্রাথমিকভাবে যে প্যানেলটি দেখা যাবে
items: [
{
xtype: 'panel',
title: 'Card 1',
html: 'Content of Card 1'
},
{
xtype: 'panel',
title: 'Card 2',
html: 'Content of Card 2'
}
],
tbar: [
{
text: 'Next',
handler: function() {
var panel = this.up('panel');
var layout = panel.getLayout();
layout.next(); // পরবর্তী কার্ডে চলে যাবে
}
}
],
renderTo: Ext.getBody()
});
table লেআউটটি উপাদানগুলোকে একটি HTML টেবিলের মতো সাজায়। এটি বিশেষভাবে ফর্ম বা অন্যান্য ডেটা উপস্থাপনার জন্য ব্যবহৃত হয়, যেখানে উপাদানগুলো সারণী আকারে সাজানো থাকে।
উদাহরণ:
Ext.create('Ext.form.Panel', {
title: 'Table Layout Example',
layout: 'table',
width: 400,
items: [
{
xtype: 'textfield',
fieldLabel: 'Name',
colspan: 2
},
{
xtype: 'textfield',
fieldLabel: 'Email'
},
{
xtype: 'textfield',
fieldLabel: 'Phone'
}
],
renderTo: Ext.getBody()
});
accordion লেআউটটি একাধিক প্যানেল তৈরি করে, এবং শুধুমাত্র এক প্যানেলকে একে একে দেখতে সক্ষম করে। এটি সাধারণত সাইডবার নেভিগেশনের জন্য ব্যবহৃত হয়।
উদাহরণ:
Ext.create('Ext.panel.Panel', {
title: 'Accordion Layout Example',
layout: 'accordion',
width: 300,
items: [
{
xtype: 'panel',
title: 'Panel 1',
html: 'Content of Panel 1'
},
{
xtype: 'panel',
title: 'Panel 2',
html: 'Content of Panel 2'
}
],
renderTo: Ext.getBody()
});
ExtJS একটি শক্তিশালী জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক যা ব্যবহারকারীর ইন্টারফেস (UI) তৈরি করতে ব্যবহৃত হয়। অ্যাপ্লিকেশন ডেভেলপমেন্টে ইউজার ইন্টারফেস (UI) ডিজাইন করার সময়, Layout ব্যবহৃত হয় যাতে অ্যাপ্লিকেশনের কম্পোনেন্টগুলো সঠিকভাবে এবং প্রফেশনালি সজ্জিত হয়। ExtJS তে Layout হল একটি ব্যবস্থা যা UI কম্পোনেন্টগুলিকে উপযুক্তভাবে এবং স্বাভাবিকভাবে স্ক্রীনে ব্যবস্থা করার জন্য ব্যবহৃত হয়।
Layout হল একটি সিস্টেম বা কৌশল যার মাধ্যমে UI কম্পোনেন্টগুলোকে একটি নির্দিষ্ট সজ্জায় এবং অর্ডারে রেন্ডার (প্রদর্শন) করা হয়। ExtJS তে Layout সিস্টেমে কম্পোনেন্টগুলো বিভিন্ন ধরণের কন্টেইনারে সাজানো হয়, যা কম্পোনেন্টের অবস্থান এবং আকার নির্ধারণ করে।
ExtJS তে Layout বিভিন্ন ধরনের হতে পারে, যেমন BorderLayout, FitLayout, CardLayout, HBoxLayout, VBoxLayout ইত্যাদি।
border, fit, hbox, vbox ইত্যাদি।BorderLayout layout তে, কন্টেইনারটি পাঁচটি ভিন্ন অংশে বিভক্ত থাকে: north, south, east, west, এবং center। এটি একটি অন্যতম জনপ্রিয় লেআউট যা সাধারণত সাইডবার, টুলবার, মেনু বার ইত্যাদির জন্য ব্যবহৃত হয়।
উদাহরণ:
Ext.create('Ext.panel.Panel', {
title: 'BorderLayout Example',
layout: 'border',
items: [
{
region: 'north',
xtype: 'panel',
height: 100,
html: 'North Region'
},
{
region: 'west',
xtype: 'panel',
width: 200,
html: 'West Region'
},
{
region: 'center',
xtype: 'panel',
html: 'Center Region'
}
],
renderTo: Ext.getBody()
});
FitLayout তে কন্টেইনারের একমাত্র কম্পোনেন্ট পুরো কন্টেইনারে ফিট হয়ে যায়। এটি একক কম্পোনেন্টের জন্য কার্যকর যেখানে পুরো কন্টেইনারে একমাত্র কম্পোনেন্ট প্রদর্শিত হবে।
উদাহরণ:
Ext.create('Ext.panel.Panel', {
title: 'FitLayout Example',
layout: 'fit',
items: [{
xtype: 'panel',
html: 'This panel will fill the container.'
}],
renderTo: Ext.getBody()
});
HBoxLayout এবং VBoxLayout হল Horizontal এবং Vertical Box Layouts। HBoxLayout এর মাধ্যমে কম্পোনেন্টগুলো অনুভূমিকভাবে সাজানো হয়, এবং VBoxLayout এর মাধ্যমে কম্পোনেন্টগুলো উল্লম্বভাবে সাজানো হয়।
HBoxLayout উদাহরণ:
Ext.create('Ext.panel.Panel', {
title: 'HBoxLayout Example',
layout: 'hbox',
items: [
{ xtype: 'panel', html: 'Panel 1' },
{ xtype: 'panel', html: 'Panel 2' }
],
renderTo: Ext.getBody()
});
VBoxLayout উদাহরণ:
Ext.create('Ext.panel.Panel', {
title: 'VBoxLayout Example',
layout: 'vbox',
items: [
{ xtype: 'panel', html: 'Panel 1' },
{ xtype: 'panel', html: 'Panel 2' }
],
renderTo: Ext.getBody()
});
CardLayout তে বিভিন্ন প্যানেল বা কম্পোনেন্টগুলো কার্ড এর মতো সাজানো থাকে, এবং একে অপরের উপর চাপানো হয়। এটি সাধারণত ট্যাব, উইজেট বা স্টেপ-বাই-স্টেপ ফর্মে ব্যবহৃত হয়।
উদাহরণ:
Ext.create('Ext.panel.Panel', {
title: 'CardLayout Example',
layout: 'card',
activeItem: 0, // কোন কম্পোনেন্টটি প্রথমে দেখানো হবে
items: [
{ html: 'Card 1' },
{ html: 'Card 2' }
],
renderTo: Ext.getBody()
});
Layout ExtJS তে একটি অত্যন্ত গুরুত্বপূর্ণ অংশ, যা অ্যাপ্লিকেশন ইউজার ইন্টারফেসে বিভিন্ন কম্পোনেন্ট সঠিকভাবে সাজাতে সাহায্য করে। এটি ডেভেলপারদের জন্য একটি সহজ এবং শক্তিশালী উপায়, যা অ্যাপ্লিকেশনগুলোর উন্নত ইউজার ইন্টারফেস ডিজাইন করতে সাহায্য করে।
ExtJS Layout ব্যবহারের মাধ্যমে আপনি:
ExtJS একটি অত্যন্ত শক্তিশালী ফ্রেমওয়ার্ক যা ডাইনামিক এবং রেসপন্সিভ ইউজার ইন্টারফেস তৈরি করার জন্য বিভিন্ন ধরনের লেআউট প্রদান করে। এগুলি বিশেষভাবে ব্যবহারকারীর ইন্টারফেসের উপাদানগুলোকে বিভিন্ন উপায়ে সাজানোর জন্য ব্যবহৃত হয়।
ExtJS-এ মূলত ৫টি প্রধান লেআউট রয়েছে, যার মধ্যে HBox, VBox, Border, এবং Fit অন্যতম। এই লেআউটগুলোকে সহজভাবে বুঝতে এবং ব্যবহার করতে সাহায্য করার জন্য নিচে প্রতিটির বিস্তারিত ব্যাখ্যা দেওয়া হলো।
HBox লেআউট (Horizontal Box Layout) উপাদানগুলোকে অনুভূমিকভাবে (হরাইজেন্টালি) সাজাতে ব্যবহৃত হয়। এই লেআউটটি সাধারণত টুলবার, নেভিগেশন বার বা অন্যান্য উপাদান যেখানে একটি লাইন বা এক্সটেন্ডেড অনুভূমিক সারি প্রয়োজন, সেখানে ব্যবহার করা হয়।
Ext.create('Ext.container.Container', {
renderTo: Ext.getBody(),
layout: 'hbox', // HBox layout ব্যবহার
items: [{
xtype: 'panel',
title: 'Panel 1',
html: 'This is panel 1',
width: 200
}, {
xtype: 'panel',
title: 'Panel 2',
html: 'This is panel 2',
width: 300
}]
});
এখানে, দুটি প্যানেল HBox লেআউটে অনুভূমিকভাবে সাজানো হয়েছে।
flex বা margin ব্যবহার করা যায়।VBox লেআউট (Vertical Box Layout) উপাদানগুলোকে উল্লম্বভাবে (ভার্টিকালি) সাজাতে ব্যবহৃত হয়। এটি সাধারণত ফর্ম বা অন্যান্য উপাদান যেখানে একটি স্তম্ভে উপাদানগুলো সজ্জিত করা দরকার, সেখানে ব্যবহৃত হয়।
Ext.create('Ext.container.Container', {
renderTo: Ext.getBody(),
layout: 'vbox', // VBox layout ব্যবহার
items: [{
xtype: 'panel',
title: 'Panel 1',
html: 'This is panel 1',
height: 200
}, {
xtype: 'panel',
title: 'Panel 2',
html: 'This is panel 2',
height: 200
}]
});
এখানে, দুটি প্যানেল VBox লেআউটে উল্লম্বভাবে সাজানো হয়েছে।
flex এবং margin ব্যবহার করা যায়।Border লেআউট একটি বহুল ব্যবহৃত লেআউট, যেখানে একটি কেন্দ্রীয় এলাকা এবং চারটি (উত্তর, দক্ষিণ, পূর্ব, পশ্চিম) পার্শ্ব এলাকা থাকে। এটি অ্যাপ্লিকেশনের একাধিক বিভাগের জন্য খুব উপকারী, যেখানে বিভিন্ন অঞ্চলে বিভিন্ন উপাদান বা ভিউ থাকতে পারে।
Ext.create('Ext.container.Viewport', {
layout: 'border', // Border layout ব্যবহার
items: [{
xtype: 'panel',
region: 'north', // উত্তর
title: 'North Panel',
height: 100
}, {
xtype: 'panel',
region: 'west', // পশ্চিম
title: 'West Panel',
width: 200
}, {
xtype: 'panel',
region: 'center', // কেন্দ্র
title: 'Center Panel',
html: 'This is center panel'
}]
});
এখানে, region কনফিগারেশন ব্যবহার করে প্যানেলগুলোকে বিভিন্ন অঞ্চলে (উত্তর, দক্ষিণ, পশ্চিম, পূর্ব, কেন্দ্র) স্থাপন করা হয়েছে।
north, south, east, west, center নামক অঞ্চলগুলোর মধ্যে উপাদানগুলো সাজানো হয়।center অঞ্চলটি স্বয়ংক্রিয়ভাবে উপলব্ধ সমস্ত স্থান গ্রহণ করে।Fit লেআউট একটি খুব সহজ লেআউট, যা শুধুমাত্র একটি উপাদানকে পুরো কন্টেইনারের মধ্যে ফিট করতে ব্যবহৃত হয়। এটি সাধারণত এমন ক্ষেত্রে ব্যবহার করা হয় যেখানে কেবল একক উপাদান বা কম্পোনেন্ট প্রদর্শিত হবে এবং তা পুরো কন্টেইনারে প্রস্থ এবং উচ্চতায় ফিট হবে।
Ext.create('Ext.container.Container', {
renderTo: Ext.getBody(),
layout: 'fit', // Fit layout ব্যবহার
items: [{
xtype: 'panel',
title: 'Fit Panel',
html: 'This is the only panel inside the container'
}]
});
এখানে, একক প্যানেলটি কন্টেইনারের পুরো এলাকা দখল করে ফিট হচ্ছে।
এই লেআউটগুলো আপনাকে বিভিন্ন ধরনের অ্যাপ্লিকেশন তৈরি করার জন্য অনেক নমনীয়তা প্রদান করে, যা প্রয়োজনীয়তা অনুসারে ভিন্ন ভিন্ন ডিভাইসে উপযুক্তভাবে প্রদর্শিত হতে পারে।
ExtJS এ Layout Configuration এবং Nesting Layouts দুটি গুরুত্বপূর্ণ কনসেপ্ট যা ইউজার ইন্টারফেসের কন্ট্রোল এবং কম্পোনেন্টগুলির অবস্থান নির্ধারণ করতে ব্যবহৃত হয়। এগুলি অ্যাপ্লিকেশনের বিভিন্ন UI উপাদানকে সঠিকভাবে সাজানো এবং ডাইনামিকভাবে অ্যাডজাস্ট করা সম্ভব করে।
Layout হল একটি কম্পোনেন্টের ভিতরের উপাদানগুলিকে সাজানোর পদ্ধতি। ExtJS তে বিভিন্ন ধরনের লেআউট আছে, যা আপনার অ্যাপ্লিকেশনের UI ডিজাইন অনুযায়ী ব্যবহার করা হয়। এর মাধ্যমে কম্পোনেন্টগুলির অবস্থান ও সাইজ নির্ধারণ করা যায়।
Ext.create('Ext.panel.Panel', {
title: 'Fit Layout Example',
width: 400,
height: 300,
layout: 'fit',
items: [{
xtype: 'panel',
html: 'This is a fit layout panel.',
bodyPadding: 10
}],
renderTo: Ext.getBody()
});
Ext.create('Ext.panel.Panel', {
title: 'Border Layout Example',
width: 600,
height: 400,
layout: 'border',
items: [{
region: 'north',
xtype: 'panel',
height: 50,
html: 'North Region'
}, {
region: 'west',
xtype: 'panel',
width: 200,
html: 'West Region'
}, {
region: 'center',
xtype: 'panel',
html: 'Center Region'
}],
renderTo: Ext.getBody()
});
Ext.create('Ext.panel.Panel', {
title: 'VBox Layout Example',
width: 400,
height: 300,
layout: {
type: 'vbox',
align: 'stretch' // stretch alignment
},
items: [{
xtype: 'panel',
title: 'Panel 1',
html: 'This is the first panel.',
flex: 1 // flex defines the space it will occupy
}, {
xtype: 'panel',
title: 'Panel 2',
html: 'This is the second panel.',
flex: 2 // this panel will occupy double space compared to Panel 1
}],
renderTo: Ext.getBody()
});
Nesting Layouts হল একাধিক লেআউট একে অপরের মধ্যে স্থাপন করা। এর মাধ্যমে একটি কমপ্লেক্স UI তৈরি করা যায় যেখানে একাধিক লেআউট একে অপরের মধ্যে অন্তর্ভুক্ত থাকে।
Ext.create('Ext.panel.Panel', {
title: 'Nesting Layout Example',
width: 600,
height: 400,
layout: 'border',
items: [{
region: 'north',
xtype: 'panel',
height: 50,
html: 'North Region'
}, {
region: 'west',
xtype: 'panel',
width: 200,
layout: 'vbox', // Nested Layout
items: [{
xtype: 'panel',
title: 'Panel 1',
html: 'This is the first nested panel.',
flex: 1
}, {
xtype: 'panel',
title: 'Panel 2',
html: 'This is the second nested panel.',
flex: 1
}]
}, {
region: 'center',
xtype: 'panel',
html: 'Center Region'
}],
renderTo: Ext.getBody()
});
এখানে, west রিজনে একটি vbox লেআউট ব্যবহার করা হয়েছে, যা দুটি প্যানেলকে ভার্টিকালি সাজায়। এর মাধ্যমে আপনি একাধিক লেআউট একে অপরের মধ্যে স্থাপন করতে পারেন, যা nesting layouts বলে পরিচিত।
এই কনফিগারেশনগুলির মাধ্যমে আপনি আরও কার্যকরী এবং ব্যবহারকারী-বান্ধব ইন্টারফেস তৈরি করতে পারেন, যা বিভিন্ন প্ল্যাটফর্মে স্বয়ংক্রিয়ভাবে সঠিকভাবে কাজ করবে।
ExtJS তে Responsive Layout তৈরি করা একটি গুরুত্বপূর্ণ প্রক্রিয়া, যেখানে অ্যাপ্লিকেশনের ইউজার ইন্টারফেস (UI) বিভিন্ন ডিভাইস এবং স্ক্রীন সাইজ অনুযায়ী অভিযোজিত (adjust) হয়। Responsive Layout এর মাধ্যমে একসাথে ডেস্কটপ এবং মোবাইল ডিভাইসে অ্যাপ্লিকেশন চালানো সহজ হয়।
ExtJS এ রেসপন্সিভ ডিজাইন তৈরি করার জন্য বিভিন্ন ধরনের লেআউট, responsiveConfig, এবং media query ব্যবহার করা হয়। এই ফিচারটি আপনার অ্যাপ্লিকেশনকে প্রয়োজনে স্বয়ংক্রিয়ভাবে স্কেল এবং অ্যাডাপ্ট করে।
responsiveConfigresponsiveConfig হল ExtJS এর একটি বৈশিষ্ট্য যা বিভিন্ন ডিভাইসের জন্য ভিউ উপাদানগুলি (যেমন: প্যানেল, গ্রিড, বা ফর্ম) কনফিগার করার জন্য ব্যবহৃত হয়। এটি স্ক্রীন সাইজ এবং অন্যান্য মিডিয়া কন্ডিশন অনুযায়ী প্রপার্টি চেঞ্জ করতে সক্ষম।
media queryমিডিয়া কুয়েরি CSS এর মতো ব্যবহার করা হয়, যার মাধ্যমে স্ক্রীন সাইজ অনুযায়ী বিভিন্ন সিএসএস স্টাইল অ্যাপ্লাই করা হয়।
ধরা যাক, আপনি একটি প্যানেল তৈরি করতে চান যা ডেস্কটপে একরকম এবং মোবাইলে আরেকরকম দেখাবে। এখানে আমরা responsiveConfig ব্যবহার করব।
Ext.define('MyApp.view.ResponsivePanel', {
extend: 'Ext.panel.Panel',
xtype: 'responsivepanel',
title: 'Responsive Panel',
width: 400,
height: 300,
html: '<p>Welcome to the responsive layout!</p>',
responsiveConfig: {
'width < 500': { // যদি স্ক্রীনের প্রস্থ 500px এর কম হয়
width: '100%',
height: 'auto',
html: '<p>Mobile Layout - Adjusted Width and Height</p>'
},
'width >= 500': { // যদি স্ক্রীনের প্রস্থ 500px এর সমান বা বেশি হয়
width: 400,
height: 300,
html: '<p>Desktop Layout - Fixed Width and Height</p>'
}
},
initComponent: function() {
this.callParent();
}
});
এখানে:
responsiveConfig ব্যবহার করা হয়েছে। যখন স্ক্রীনের প্রস্থ 500px এর নিচে যাবে, তখন প্যানেলটি 100% প্রস্থ নিয়ে মোবাইল ফর্ম্যাটে কনভার্ট হবে।এছাড়াও Flex Layout এবং Column Layout ব্যবহার করে আপনি বিভিন্ন কলাম এবং রেসপন্সিভ ডিজাইন তৈরি করতে পারেন।
Ext.define('MyApp.view.FlexLayoutPanel', {
extend: 'Ext.panel.Panel',
xtype: 'flexlayoutpanel',
title: 'Flex Layout Panel',
layout: 'hbox', // flexbox layout
items: [
{
xtype: 'panel',
flex: 1, // Flexibly adjusts the width
html: '<p>Left Panel</p>',
style: { border: '1px solid black' }
},
{
xtype: 'panel',
width: 200, // Fixed width for right panel
html: '<p>Right Panel</p>',
style: { border: '1px solid black' }
}
]
});
layout: 'hbox': এটি ফ্লেক্সবক্স লেআউট ব্যবহার করছে, যা উপাদানগুলোকে এক সারিতে রাখে এবং সেগুলোর আকার স্ক্রীনের প্রস্থ অনুসারে কাস্টমাইজ করে।flex: ফ্লেক্সবক্সের মাধ্যমে উপাদানগুলি স্বয়ংক্রিয়ভাবে তাদের প্রস্থ বৃদ্ধি বা সংকুচিত করতে পারে।ExtJS তে CSS স্টাইলিংয়ের মাধ্যমে মিডিয়া কুয়েরি ব্যবহার করতে পারেন। এর মাধ্যমে বিভিন্ন স্ক্রীন সাইজ অনুযায়ী কাস্টম স্টাইল অ্যাপ্লাই করা হয়।
@media (max-width: 768px) {
.x-panel {
background-color: #f0f0f0; /* Mobile-specific background color */
}
}
@media (min-width: 769px) {
.x-panel {
background-color: #ffffff; /* Desktop-specific background color */
}
}
এখানে, মিডিয়া কুয়েরি ব্যবহার করে আমরা মোবাইল এবং ডেস্কটপের জন্য আলাদা ব্যাকগ্রাউন্ড রঙ নির্ধারণ করেছি।
Ext.container.Viewport এবং layout: 'fit'ডেস্কটপ এবং মোবাইল অ্যাপ্লিকেশন ডিজাইন করতে Ext.container.Viewport এবং layout: 'fit' ব্যবহার করা হয়। এই লেআউটটি স্বয়ংক্রিয়ভাবে কনটেন্টকে স্ক্রীনের পুরো প্রস্থ এবং উচ্চতায় ফিট করে।
Ext.define('MyApp.view.ViewportPanel', {
extend: 'Ext.container.Viewport',
layout: 'fit',
items: [
{
xtype: 'panel',
title: 'Responsive Viewport Panel',
html: '<p>This panel fits the entire screen!</p>'
}
]
});
layout: 'fit': এটি কনটেন্টকে পুরো স্ক্রীনে ফিট করে এবং খুবই কার্যকর মোবাইল ও ডেস্কটপের জন্য।ExtJS তে রেসপন্সিভ টুলবার এবং মেনু তৈরি করা সম্ভব, যা স্ক্রীন সাইজ অনুযায়ী টুলবারের আইটেমগুলি সঠিকভাবে ডিসপ্লে করবে। ছোট স্ক্রীনে মেনু বা টুলবার এলিমেন্টগুলোটি সঙ্কুচিত হতে পারে।
Ext.create('Ext.toolbar.Toolbar', {
renderTo: Ext.getBody(),
items: [
{ text: 'Home' },
{ text: 'About' },
{ text: 'Contact' },
{
xtype: 'tbfill'
},
{
xtype: 'button',
text: 'Settings',
menu: {
items: [
{ text: 'Profile' },
{ text: 'Logout' }
]
}
}
]
});
এখানে tbfill ব্যবহার করে টুলবার আইটেমগুলোর মধ্যে ফাঁকা স্থান সৃষ্টি করা হয়েছে।
responsiveConfig এবং media query ব্যবহার করা হয়। এর মাধ্যমে অ্যাপ্লিকেশন UI বিভিন্ন ডিভাইসের স্ক্রীন সাইজ অনুযায়ী স্বয়ংক্রিয়ভাবে অভিযোজিত হয়।layout: 'fit', hbox বা vbox লেআউট ব্যবহার করে রেসপন্সিভ প্যানেল এবং উপাদান তৈরি করা যায়।Ext.container.Viewport লেআউট ব্যবহার করে স্ক্রীনের পুরো প্রস্থে কনটেন্ট ফিট করানো সম্ভব।এভাবে, ExtJS তে রেসপন্সিভ ডিজাইন তৈরি করলে আপনার অ্যাপ্লিকেশন বিভিন্ন স্ক্রীন সাইজের ডিভাইসে কার্যকরীভাবে চলবে।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
